<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="createTime" label="Date" width="180" />
      <el-table-column prop="name" label="name" width="180" />
      <el-table-column prop="storeId" label="storeId" />
    </el-table>

    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        @current-change="loadData"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
    />
  </div>
</template>

<script name="itemList" setup>
import {ref} from "vue"
import {page} from "@/api/item"
import {onMounted} from "vue";

const tableData = ref([])
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(1)

const loadData = () => {
  let param = {
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }
  page(param).then(
      res => {
        tableData.value = res.data.list
        total.value = res.data.total
      }
  )
}

onMounted( () => {
  loadData()
} )

</script>

<style scoped>

</style>